<template>
    <div>
        <el-dialog title='评估记录' :visible.sync="isShow" @close="onClose" width="60%">
            <div class="common-view">
                <el-table :data="tableData" height="100%" class="hide-scrollbar"
                          :header-cell-style="headClass" :cell-style="rowClass">
                    <el-table-column prop="studentName" label="学生姓名">
                    </el-table-column>
                    <el-table-column prop="teacherName" label="评估人">
                    </el-table-column>
                    <el-table-column prop="nodeName" label="评估方法">
                    </el-table-column>
                    <el-table-column prop="commitTime" label="提交时间">
                    </el-table-column>
                    <el-table-column prop="percentage" label="操作">
                        <template slot-scope="scope">
                            <span class="examine-view" @click="detail(scope.row)">查看详情</span>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-dialog>
        <el-dialog title='评估信息' :visible.sync="isShowDetail" @close="onCloseDetail" width="65%" :key="dialogKey">
            <div class="common-button">
                <div @click="handleClick($event,1)" id="pep">评估详情</div>
                <div @click="handleClick($event,2)">康复计划</div>
                <div @click="handleClick($event,3)">答题卡</div>
            </div>
            <div class="common-view1" v-if="selected == 1">
                <!-- 完成 -->
                <div class="common-view2" v-if="nodeName === 'PEP-3'">
                    <div class="div-title-view">一、月龄换算</div>
                    <el-table :data="commonEvaTableData.developMoonAgeArr" style="overflow: auto;"
                              :header-cell-style="headClass1" :cell-style="rowClass">
                        <el-table-column prop="nodeName" label="功能区">
                        </el-table-column>
                        <el-table-column prop="sourceScore" label="原始分">
                        </el-table-column>
                        <el-table-column prop="developMoon" label="发展月龄">
                        </el-table-column>
                    </el-table>
                    <div class="div-title-view">二、发展程度</div>
                    <el-table :data="commonEvaTableData.developLevelArr" style="overflow: auto;"
                              :header-cell-style="headClass1" :cell-style="rowClass">
                        <el-table-column prop="nodeName" label="功能区">
                        </el-table-column>
                        <el-table-column prop="computedPercentage" label="百分比级数">
                        </el-table-column>
                        <el-table-column prop="developLevel" label="发展程度">
                        </el-table-column>
                    </el-table>
                    <div class="div-title-view">三、和成分转换</div>
                    <el-table :data="commonEvaTableData.composeArr" style="overflow: auto;"
                              :header-cell-style="headClass1" :cell-style="rowClass">
                        <el-table-column prop="actionType" label="类别">
                        </el-table-column>
                        <el-table-column prop="moonAge" label="发展月龄">
                        </el-table-column>
                        <el-table-column prop="percentage" label="百分比级数">
                        </el-table-column>
                        <el-table-column prop="developLevel" label="发展程度">
                        </el-table-column>
                    </el-table>
                </div>
                <!-- 完成 -->
                <div class="common-view2" v-if="nodeName === 'ESDM'">
                    <el-table :data="commonEvaTableData" style="overflow: auto;"
                              :header-cell-style="headClass1" :cell-style="rowClass">
                        <el-table-column prop="domainName" label="功能区">
                        </el-table-column>
                        <el-table-column prop="percentage" label="百分比级数">
                        </el-table-column>
                    </el-table>
                </div>
                <!-- 完成 -->
                <div class="common-view2" v-if="nodeName === 'PDMS-2'">
                    <div class="div-title-view">一、相当月龄</div>
                    <el-table :data="commonEvaTableData.matchAgeArr" style="overflow: auto;"
                              :header-cell-style="headClass1" :cell-style="rowClass">
                        <el-table-column prop="domainName" label="功能区">
                        </el-table-column>
                        <el-table-column prop="matchAge" label="相当年龄">
                        </el-table-column>
                        <el-table-column prop="sourceScore" label="原始分">
                        </el-table-column>
                    </el-table>
                    <div class="div-title-view">二、标准分</div>
                    <el-table :data="commonEvaTableData.standardScoreExplainArr" style="overflow: auto;"
                              :header-cell-style="headClass1" :cell-style="rowClass">
                        <el-table-column prop="nodeName" label="功能区">
                        </el-table-column>
                        <el-table-column prop="sourceScore" label="原始分">
                        </el-table-column>
                        <el-table-column prop="standardScore" label="标准分">
                        </el-table-column>
                        <el-table-column prop="scoreExplain" label="表现">
                        </el-table-column>
                    </el-table>
                    <div class="div-title-view">三、发育商</div>
                    <el-table :data="commonEvaTableData.composeArr" style="overflow: auto;"
                              :header-cell-style="headClass1" :cell-style="rowClass">
                        <el-table-column prop="groupKey" label="类别">
                        </el-table-column>
                        <el-table-column prop="standardScore" label="标准分">
                        </el-table-column>
                        <el-table-column prop="percentage" label="百分比级数">
                        </el-table-column>
                        <el-table-column prop="developQuotient" label="发育商">
                        </el-table-column>
                        <el-table-column prop="scoreExplain" label="发展程度">
                        </el-table-column>
                    </el-table>
                </div>
                <!-- 完成 -->
                <div class="common-view2" v-if="nodeName === 'SPM'">
                    <div class="div-title-view">一、课堂表现</div>
                    <el-table :data="commonEvaTableData.explainArr" style="overflow: auto;"
                              :header-cell-style="headClass1" :cell-style="rowClass">
                        <el-table-column prop="nodeName" label="功能区">
                        </el-table-column>
                        <el-table-column prop="schoolSourceScore" label="原始分">
                        </el-table-column>
                        <el-table-column prop="schoolCharacteristicScore" label="特性分">
                        </el-table-column>
                        <el-table-column prop="schoolExplain" label="表现">
                        </el-table-column>
                    </el-table>
                    <div class="div-title-view">二、家庭表现</div>
                    <el-table :data="commonEvaTableData.explainArr" style="overflow: auto;"
                              :header-cell-style="headClass1" :cell-style="rowClass">
                        <el-table-column prop="nodeName" label="功能区">
                        </el-table-column>
                        <el-table-column prop="homeSourceScore" label="原始分">
                        </el-table-column>
                        <el-table-column prop="homeCharacteristicScore" label="特性分">
                        </el-table-column>
                        <el-table-column prop="homeExplain" label="表现">
                        </el-table-column>
                    </el-table>
                </div>
                <!-- 完成 -->
                <div class="common-view2" v-if="nodeName === 'VB-MAPP'">
                    <div class="div-title-view">一、附加题评分</div>
                    <el-table :data="commonEvaTableData.additionalArr" style="overflow: auto;"
                              :header-cell-style="headClass1" :cell-style="rowClass">
                        <el-table-column prop="groupNum" label="附加题组别">
                        </el-table-column>
                        <el-table-column prop="totalScore" label="得分">
                        </el-table-column>
                    </el-table>
                    <div class="div-title-view">二、得分情况</div>
                    <el-table :data="commonEvaTableData.reportArr" style="overflow: auto;"
                              :header-cell-style="headClass1" :cell-style="rowClass">
                        <el-table-column prop="domainName" label="功能区">
                        </el-table-column>
                        <el-table-column prop="sourceScore" label="得分">
                        </el-table-column>
                    </el-table>
                </div>

                <div class="common-view2" v-if="nodeName === '双溪'">
                  <div style="display: flex;flex-direction: column">
                    <el-table :data="commonEvaTableData.analyseList" style="overflow: auto;"
                              :header-cell-style="headClass1" :cell-style="rowClass">
                      <el-table-column type="index" label="序号" width="100">
                      </el-table-column>
                      <el-table-column prop="nodeName" label="功能区" width="100">
                      </el-table-column>
                      <el-table-column prop="analyse" label="报告显示">
                      </el-table-column>
                      <el-table-column prop="sourceScore" label="原始分" width="100">
                      </el-table-column>
                    </el-table>
                  </div>
                </div>

            </div>
            <div class="common-view1" v-else-if="selected == 2">
              <!-- 完成 -->
              <div class="common-view2" v-if="nodeName === 'PEP-3'">
                <div class="div-box" v-for="(item,index) in commonEvaTableData" :key="index">
                  <div class="div-title-header">{{ item.domainName }}</div>
                  <div class="div-title-content">{{ item.content}}</div>
                </div>

              </div>
              <div class="common-view2" v-if="nodeName === 'ESDM'">
                <div class="div-box" v-for="(item,index) in commonEvaTableData" :key="index">
                  <div class="div-title-header">{{ item.domainName }}</div>
                  <div class="div-title-content">{{ item.content}}</div>
                </div>
              </div>
              <!-- 完成 -->
              <div class="common-view2" v-if="nodeName === 'PDMS-2'">
                <div class="div-box" v-for="(item,index) in commonEvaTableData" :key="index">
                  <div class="div-title-header">{{ item.domainName }}</div>
                  <div class="div-title-content">{{ item.content}}</div>
                </div>
              </div>
              <!-- 完成 -->
              <div class="common-view2" v-if="nodeName === 'SPM'">
                <div class="div-box" v-for="(item,index) in commonEvaTableData" :key="index">
                  <div class="div-title-header">{{ item.domainName }}</div>
                  <div class="div-title-content">{{ item.content}}</div>
                </div>
              </div>
              <!-- 完成 -->
              <div class="common-view2" v-if="nodeName === 'VB-MAPP'">
                <div class="div-box" v-for="(item,index) in commonEvaTableData" :key="index">
                  <div class="div-title-header">{{ item.domainName }}</div>
                  <div class="div-title-content">{{ item.content}}</div>
                </div>
              </div>

              <!-- 完成 -->
              <div class="common-view2" v-if="nodeName === '双溪'">
                <div class="div-box" v-for="(item,index) in commonEvaTableData" :key="index">
                  <div class="div-title-header">{{ item.domainName }}</div>
                  <div class="div-title-content">{{ item.content}}</div>
                </div>

              </div>
            </div>
            <div class="common-view1" v-else-if="selected == 3">
                <!-- 完成 -->
                <div class="common-view2" v-if="nodeName === 'PEP-3'">
                    <div style="display: flex;flex-direction: column" v-for="(item,index) in answerSheetTableData" :key="item.domainId">
                        <div class="div-title-view">{{(index+1)}}、{{item.domainName}}</div>
                        <el-table :data="item.answerSheet" border
                                  :header-cell-style="headClass1" :cell-style="rowClass">
                            <el-table-column type="index" width="60"/>
                            <el-table-column prop="stem" label="题干">
                            </el-table-column>
                            <el-table-column prop="optionContent" label="做题项">
                            </el-table-column>
                            <el-table-column prop="optionScore" label="得分">
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
                <!-- 完成 -->
                <div class="common-view2" v-if="nodeName === 'ESDM'">
                    <div style="display: flex;flex-direction: column" v-for="(item,index) in answerSheetTableData" :key="item.domainId">
                        <div class="div-title-view">{{(index+1)}}、{{item.domainName}}</div>
                        <el-table :data="item.answerSheet" border
                                  :header-cell-style="headClass1" :cell-style="rowClass">
                            <el-table-column type="index" width="60"/>
                            <el-table-column prop="stem" label="题干">
                            </el-table-column>
                            <el-table-column prop="optionContent" label="做题项">
                            </el-table-column>
                            <el-table-column prop="optionScore" label="得分">
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
                <!-- 完成 -->
                <div class="common-view2" v-if="nodeName === 'PDMS-2'">
                    <div style="display: flex;flex-direction: column" v-for="(item,index) in answerSheetTableData" :key="item.domainId">
                        <div class="div-title-view">{{(index+1)}}、{{item.domainName}}</div>
                        <el-table :data="item.answerSheet" border
                                  :header-cell-style="headClass1" :cell-style="rowClass">
                            <el-table-column type="index" width="60"/>
                            <el-table-column prop="stem" label="题干">
                            </el-table-column>
                            <el-table-column prop="optionContent" label="做题项">
                            </el-table-column>
                            <el-table-column prop="optionScore" label="得分">
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
                <!-- 完成 -->
                <div class="common-view2" v-if="nodeName === 'SPM'">
                    <div style="display: flex;flex-direction: column" v-for="(item,index) in answerSheetTableData" :key="item.domainId">
                        <div class="div-title-view">{{(index+1)}}、{{item.domainName}}</div>
                        <el-table :data="item.answerSheet" border
                                  :header-cell-style="headClass1" :cell-style="rowClass">
                            <el-table-column type="index" width="60"/>
                            <el-table-column prop="stem" label="题干">
                            </el-table-column>
                            <el-table-column prop="optionContent" label="做题项">
                            </el-table-column>
                            <el-table-column prop="optionScore" label="得分">
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
                <!-- 完成 -->
                <div class="common-view2" v-if="nodeName === 'VB-MAPP'">
                    <div style="display: flex;flex-direction: column" v-for="(item,index) in answerSheetTableData" :key="item.domainId">
                        <div class="div-title-view">{{(index+1)}}、{{item.domainName}}</div>
                        <el-table :data="item.answerSheet" border
                                  :header-cell-style="headClass1" :cell-style="rowClass">
                            <el-table-column type="index" width="60"/>
                            <el-table-column prop="stem" label="题干">
                            </el-table-column>
                            <el-table-column prop="optionContent" label="做题项">
                            </el-table-column>
                            <el-table-column prop="optionScore" label="得分">
                            </el-table-column>
                        </el-table>
                    </div>
                </div>

              <!-- 完成 -->
              <div class="common-view2" v-if="nodeName === '双溪'">
                <div style="display: flex;flex-direction: column" v-for="(item,index) in answerSheetTableData" :key="item.domainId">
                  <div class="div-title-view">{{(index+1)}}、{{item.domainName}}</div>
                  <el-table :data="item.answerSheet" border
                            :header-cell-style="headClass1" :cell-style="rowClass">
                    <el-table-column type="index" width="60"/>
                    <el-table-column prop="stem" label="题干">
                    </el-table-column>
                    <el-table-column prop="optionContent" label="做题项">
                    </el-table-column>
                    <el-table-column prop="optionScore" label="得分">
                    </el-table-column>
                  </el-table>
                </div>
              </div>
            </div>
            <div class="common-footer">
                <div @click="onCloseDetail">确 定</div>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import {
  getStudentRecordList,
  getPEP3RecordReport,
  getESDMRecordReport,
  getSPMRecordReport,
  getPDMS2RecordReport,
  getVBMAPPRecordReport,
  getESDMDomainLabelsReport,
  getPDMS2DomainLabelsReport, getPEP3DomainLabelsReport, getSPMDomainLabelsReport, getVBMAPPDomainLabelsReport,
  getPEP3AnswerSheet,
  getESDMAnswerSheet,
  getPDMS2AnswerSheet,
  getSPMAnswerSheet,
  getVBMAPPAnswerSheet, getSXRecordReport, getSxDomainLabelsReport, getSxAnswerSheet,
} from '@/api/student.js'

    export default {
        props: ['isShowDialog', 'selectStudentId'],
        data() {
            return {
                currentSelectItem: undefined,
                studentId: this.selectStudentId,
                isDisabled: false,
                //   是否显示当前dialog
                isShow: this.isShowDialog,
                tableData: [],
                //pep3的评估信息集合
                commonEvaTableData:[],
                answerSheetTableData:[],
                isShowDetail: false,
                selected: 1,
                recordId: '',
                nodeName: '',
                dialogKey: Math.random()
            }
        },
        watch: {
            selectStudentId: {
                handler(newValue, oldValue) {
                    this.studentId = newValue;
                },
                deep: true
            }
        },
        created() {
            this.getEvaRecordList();
        },
        computed: {},
        mounted() {
        },
        methods: {
            onCloseDetail() {
                this.isShowDetail = false
                this.recordId = ''
                this.nodeName = ''
            },
            detail(row) {
                this.dialogKey = Math.random()
                this.isShowDetail = true
                this.$nextTick(() => {
                    this.currentSelectItem = document.getElementById("pep")
                    this.currentSelectItem.classList.add("common-button-click")
                    console.log("currentSelectItem", this.currentSelectItem);
                })
                this.selected = 1;
                this.recordId = row.recordId;
                this.nodeName = row.nodeName;
                //根据不同的类型获取请求不同的接口,展示不同的列表数据
                this.tabSelectView(1);
            },
            tabSelectView() {
                if (this.selected == 1) {
                    //评估信息
                    this.evaluatingInfo();
                } else if (this.selected == 2) {
                    //康复计划
                    this.rehabilitationPlan();
                } else if (this.selected == 3) {
                    //答题卡
                    this.answerSheet();
                }
            },
            //答题卡
            answerSheet(){
                this.answerSheetTableData = []
                switch (this.nodeName) {
                    case "ESDM":
                        getESDMAnswerSheet(this.recordId).then((res) => {
                            console.log("getPEP3AnswerSheet", res)
                            if (res.code == 200) {
                                this.answerSheetTableData = res.data;
                            }
                        });
                        break;
                    case "PDMS-2":
                        getPDMS2AnswerSheet(this.recordId).then((res) => {
                            console.log("getPEP3AnswerSheet", res)
                            if (res.code == 200) {
                                this.answerSheetTableData = res.data;
                            }
                        });
                        break;
                    case "PEP-3":
                        getPEP3AnswerSheet(this.recordId).then((res) => {
                            console.log("getPEP3AnswerSheet", res)
                            if (res.code == 200) {
                                this.answerSheetTableData = res.data;
                            }
                        });
                        break;
                    case "SPM":
                        getSPMAnswerSheet(this.recordId).then((res) => {
                            console.log("getPEP3AnswerSheet", res)
                            if (res.code == 200) {
                                this.answerSheetTableData = res.data;
                            }
                        });
                        break;
                    case "VB-MAPP":
                        getVBMAPPAnswerSheet(this.recordId).then((res) => {
                            console.log("getPEP3AnswerSheet", res)
                            if (res.code == 200) {
                                this.answerSheetTableData = res.data;
                            }
                        });
                        break;
                    case "双溪":
                        getSxAnswerSheet(this.recordId).then((res) => {
                            console.log("双溪 答题卡", res)
                            if (res.code == 200) {
                                this.answerSheetTableData = res.data;
                            }
                        });
                        break;
                    default:
                        break
                }
            },
            //康复计划
            rehabilitationPlan() {
                this.commonEvaTableData = []
            console.log("康复计划",this.nodeName)
            switch (this.nodeName) {
              case "ESDM":
                getESDMDomainLabelsReport(this.recordId).then((res) => {
                  console.log("ESDM", res)
                  if (res.code == 200) {
                    this.commonEvaTableData = res.data;
                  }
                });
                break;
              case "PDMS-2":
                getPDMS2DomainLabelsReport(this.recordId).then((res) => {
                  console.log("PDMS-2", res)
                  if (res.code == 200) {
                    this.commonEvaTableData = res.data;
                  }
                });
                break;
              case "PEP-3":
                getPEP3DomainLabelsReport(this.recordId).then((res) => {
                  console.log("PEP-3", res)
                  if (res.code == 200) {
                    this.commonEvaTableData = res.data;
                  }
                });
                break;
              case "SPM":
                getSPMDomainLabelsReport(this.recordId).then((res) => {
                  console.log("SPM", res)
                  if (res.code == 200) {
                    this.commonEvaTableData = res.data;
                  }
                });
                break;
              case "VB-MAPP":
                getVBMAPPDomainLabelsReport(this.recordId).then((res) => {
                  console.log("VB-MAPP", res)
                  if (res.code == 200) {
                    this.commonEvaTableData = res.data;
                  }
                });
                break;
              case "双溪":
                getSxDomainLabelsReport(this.recordId).then((res) => {
                  console.log("双溪", res)
                  if (res.code == 200) {
                    this.commonEvaTableData = res.data;
                  }
                });
                break;
              default:
                break
            }
          },
            //评估信息接口
            evaluatingInfo() {
                console.log(this.nodeName)
                this.commonEvaTableData = []
                switch (this.nodeName) {
                    case "ESDM":
                        getESDMRecordReport(this.recordId).then((res) => {
                            console.log("res", res)
                            if (res.code == 200) {
                                this.commonEvaTableData = [...res.data.connectArr, ...res.data.knowableArr, ...res.data.socialArr, ...res.data.sportArr];
                                console.log("commonEvaTableData", this.commonEvaTableData)
                            }
                        });
                        break;
                    case "PDMS-2":
                        getPDMS2RecordReport(this.recordId).then((res) => {
                            console.log("res", res)
                            if (res.code == 200) {
                                this.commonEvaTableData = res.data;
                            }
                        });
                        break;
                    case "PEP-3":
                        getPEP3RecordReport(this.recordId).then((res) => {
                            console.log("res", res)
                            if (res.code == 200) {
                                this.commonEvaTableData = res.data;
                            }
                        });
                        break;
                    case "SPM":
                        getSPMRecordReport(this.recordId).then((res) => {
                            console.log("res", res)
                            if (res.code == 200) {
                                this.commonEvaTableData = res.data;
                            }
                        });
                        break;
                    case "VB-MAPP":
                        getVBMAPPRecordReport(this.recordId).then((res) => {
                            console.log("res", res)
                            if (res.code == 200) {
                                this.commonEvaTableData = res.data;
                            }
                        });
                        break;
                    case "双溪":
                        getSXRecordReport(this.recordId).then((res) => {
                            console.log("res", res)
                            if (res.code == 200) {
                                this.commonEvaTableData = res.data;
                            }
                        });
                        break;
                    default:
                        break
                }
            },
            handleClick(event, key) {
                if (this.currentSelectItem) {
                    // 去掉样式
                    this.currentSelectItem.classList.remove('common-button-click');
                }
                this.selected = key;
                let e = event.currentTarget;
                this.currentSelectItem = e;
                e.classList.add('common-button-click');
                this.tabSelectView();
            },
            getEvaRecordList() {
                console.log("selectStudentId", this.selectStudentId)
                getStudentRecordList({
                    studentId: this.selectStudentId
                }).then((res) => {
                    console.log(res)
                    if (res.code == 200) {
                        this.tableData = res.data;
                    }
                });
            },
            //关闭弹窗清空表单
            onClose() {
                this.$emit('closeEvaRecord')
            },
            headClass() {
                //表头居中显示
                return "text-align:center;padding:15px";
            },
            headClass1() {
                //表头居中显示
                return "text-align:center;padding:10px;background-color: #f9f9f9;";
            },
            rowClass() {
                //表格数据居中显示
                return "text-align:center;padding:10px;";
            },
        },
    }
</script>
<style lang="scss" scoped>

    .common-view {
        width: 100%;
        height: calc(60vh);
        border: 1px solid #e1e1e1;
        border-radius: 10px;
        padding: 5px;
    }

    .common-view1 {
        width: 100%;
        height: calc(50vh);
        border: 1px solid #e1e1e1;
        border-radius: 10px;
        padding: 5px;
    }

    .common-view2 {
        width: 100%;
        height: calc(49vh);
        overflow: hidden;
        overflow-y: scroll;

        .div-title-view {
            color: #11A2F0;
            font-size: 20px;
            margin-bottom: 10px;
            margin-top: 10px;
        }

      .div-box{
         padding: 0px 10px;
        .div-title-header{
          text-align: left;
          color: #11A2F0;
          font-size: 20px;
          margin-bottom: 10px;
          margin-top: 10px;
        }
        .div-title-content{
          text-align: left;
          font-size: 16px;
          line-height: 25px;
        }
      }
    }

    /deep/ .el-dialog__wrapper {
        position: fixed;
        top: 10px;
    }

    /deep/ .el-dialog {
        -webkit-transform: none;
        transform: none;
        text-align: center;
        left: 0;
        position: relative;
        margin: 0 auto;
        border-radius: 15px;
    }

    /deep/ .el-dialog__title {
        line-height: 0.125rem;
        font-size: 0.09375rem;
        color: #303133;
        flex: auto;
        text-align: center;
        font-weight: bold;
    }

    /deep/ .el-dialog__headerbtn .el-dialog__close {
        color: #909399;
        font-size: 0.15rem;
    }

    .examine-view {
        color: #2b2cff;
        border-bottom: 1px solid #2b2cff;
    }

    //隐藏指定 el-table 的水平滚动条
    .hide-scrollbar /deep/ .el-table__body-wrapper::-webkit-scrollbar {
        width: 0 !important;
        height: 0 !important;
        background-color: transparent;
    }

    .hide-scrollbar /deep/ .el-table th.gutter, .el-table td.gutter {
        width: 0px !important;
        border-right-width: 0;
        border-bottom-width: 0;
        padding: 0;
    }

    /deep/ .el-dialog__body {
        padding: 1% 0.10417rem;
    }

    /* 隐藏表格底部横线 */
    /deep/ .el-table::after {
        height: 0 !important;
    }

    .common-button {
        display: flex;
        justify-content: center;
        flex-direction: row;
        margin-bottom: 20px;
        color: black;
        font-size: 0.08rem;
        font-weight: bold;

        div {
            width: 110px;
            height: 40px;
            border: 1px solid #EAEAEA;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 20px;
            border-radius: 10px;
        }
    }

    .common-button-click {
        color: white;
        background: #68A5FF;
    }

    .common-footer {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        margin-top: 30px;

        div {
            width: 170px;
            height: 45px;
            background: #67A5FF;
            border-radius: 10px;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 0.12rem;
        }
    }
</style>

